<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>游戏管理</el-breadcrumb-item>
      <el-breadcrumb-item>游戏列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <div>
        <el-row :gutter="20">
          <el-col :span="8">
            <!-- 搜索框 -->
            <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getList">
              <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-table
          :data="gameList"
          border
          stripe
        >
          <el-table-column type="index"></el-table-column>
          <el-table-column
            label="游戏主图"
          >
            <template slot-scope="scope">
              <img :src="getImgPath(scope.row.picturePath)" alt="无">
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="游戏名称"
          >
          </el-table-column>
          <el-table-column
            label="是否通知"
          >
            <template slot-scope="scope">
              {{ (scope.row.isAnnounced === 1) ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column
            label="是否发布"
          >
            <template slot-scope="scope">
              {{ (scope.row.isReleased === 1) ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
          >
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="前往游戏页面" placement="top" :enterable="false">
                <el-button type="primary" icon="el-icon-edit" size="mini"
                           @click="gotoGamePage(scope.row.id)"></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="删除该游戏" placement="top" :enterable="false">
                <el-button type="danger" icon="el-icon-delete" size="mini"
                           @click="deleteGame(scope.row.id)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[5, 10, 15]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

  </div>
</template>
<script>
export default {
  data () {
    return {
      queryInfo: {
        pageNum: 1,
        pageSize: 5,
        query: ''
      },
      total: 0,
      gameList: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const { data: res } = await this.$http.get('/api/game/selectAllGame', { params: this.queryInfo })
      if (res.code !== 200) {
        this.$message.error(res.message)
        return
      }
      console.log(res)
      this.gameList = res.data.records
      this.total = res.data.total
    },
    deleteGame (infoId) {
      this.$confirm('此操作将永久删除该游戏, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$http.delete('/api/game', { data: { id: infoId } })
        if (res.code === 200) {
          this.$message.success('删除游戏成功')
          await this.getList()
        } else {
          this.$message.error('删除游戏失败')
          console.log(res)
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage
      this.getList()
    },
    gotoGamePage (info) {
      console.log(info)
      window.location.href = 'https://www.baidu.com'
    },
    getImgPath (path) {
      if (path !== null) {
        return this.$http.defaults.baseURL + path
      } else {
        return null
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
